<template>

  <div style="margin-top: 60px; margin-left: 330px; width: 300px; height: 500px; border: 0 solid red;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="水电费ID" prop="id">
        <el-input :disabled="true" v-model="ruleForm.id" readonly></el-input>
      </el-form-item>
      <el-form-item label="更新日期" prop="updateDate">

        <el-date-picker
            v-model="ruleForm.updateDate"
            type="datetime"
            placeholder="选择日期和时间"
            value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>

      </el-form-item>
      <el-form-item label="实际水量使用" prop="actualWaterUsage">
        <el-input v-model.number="ruleForm.actualWaterUsage"></el-input>
      </el-form-item>
      <el-form-item label="实际电量使用" prop="actualElectricityUsage">
        <el-input v-model.number="ruleForm.actualElectricityUsage"></el-input>
      </el-form-item>
      <el-form-item label="预付水量" prop="prepaidWaterAmount">
        <el-input v-model.number="ruleForm.prepaidWaterAmount"></el-input>
      </el-form-item>
      <el-form-item label="预付电量" prop="prepaidElectricityAmount">
        <el-input v-model.number="ruleForm.prepaidElectricityAmount"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
export default {
  data() {
    return {
      category: null,
      ruleForm: {
        id: '',
        updateDate: '',
        actualWaterUsage: '',
        actualElectricityUsage: '',
        prepaidWaterAmount: '',
        prepaidElectricityAmount: '',
      },
      rules: {
        dormitoryId: [  // Adding dormitory_id rule
          {required: true, message: '请输入公寓ID', trigger: 'blur'}
        ],
        // updateDate: [  // Adding update_date rule
        //   { required: true, message: '请选择更新日期', trigger: 'change' }
        // ],
        actualWaterUsage: [
          {required: true, message: '请输入实际水量使用', trigger: 'blur'}
        ],
        actualElectricityUsage: [
          {required: true, message: '请输入实际电量使用', trigger: 'blur'}
        ],
        prepaidWaterAmount: [
          {required: true, message: '请输入预付水量', trigger: 'blur'}
        ],
        prepaidElectricityAmount: [
          {required: true, message: '请输入预付电量', trigger: 'blur'}
        ]
      }
    };

  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.put('http://localhost:9090/utilities/update', _this.ruleForm).then(function (resp) {
            if (resp.data.code === 0) {
              _this.$alert(_this.ruleForm.id + '修改成功', '', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/UtilitiesManagement')
                }
              });
            }
          })
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:9090/utilities/findById/' + _this.$route.query.id).then(function (resp) {
      _this.ruleForm = resp.data.data
    })
  }
}
</script>
